<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"
    />
    <meta charset="utf-8" />
    <title>避難経路</title>
    <style>
      html,
      body,
      #map_canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      a[href^="http://maps.google.com/maps"],
      a[href^="https://maps.google.com/maps"],
      .gmnoprint a,
      .gmnoprint span,
      .gm-style-cc {
        display: none !important;
      }
      .gmnoprint div {
        background: none !important;
      }
    </style>
    <script type="text/javascript" src="./js/uni.webview.1.5.4.js"></script>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?v=3.56&key=AIzaSyALe5nk06cxXadAo5vxzXBCyIGn8gxgKig&language=ja&callback=initMap"
    ></script>
    <script>
      function getQuery(name) {
        let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        let r = window.location.search.substr(1).match(reg)
        if (r != null) {
          return decodeURIComponent(r[2])
        }
        return null
      }
      let map
      let marker
      let rotation = 0;
      let lastUpdateTime = 0;
      function initMap() {
        const uluru = {
          lat: Number(getQuery('lat')),
          lng: Number(getQuery('log'))
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), {
          center: uluru,
          disableDefaultUI: true,
          zoom: 15
        })
        position = new google.maps.LatLng(Number(getQuery('lat')), Number(getQuery('log')))
        const svgMarker = {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          fillColor: "red",
          fillOpacity: 1,
          strokeWeight: 0,
          rotation: rotation,
          scale: 8,
          anchor: new google.maps.Point(0, 5),
        };
        marker = new google.maps.Marker({
          position: newLatLng,
          map: map,
          zIndex: 9999,
          icon: svgMarker
        })
        // 调用方法来添加指南针控件
        addCompassControl();
      }

      function addCompassControl() {
        // 创建指南针按钮的容器
        const compassDiv = document.createElement('div');
        compassDiv.style.margin = '10px';
        compassDiv.style.cursor = 'pointer';

        // 创建指南针图标
        const compassIcon = document.createElement('img');
        compassIcon.src = 'https://img.icons8.com/ios-filled/50/000000/compass.png'; // 可以替换为自己的图标路径
        compassIcon.style.height = '50px';
        compassIcon.style.width = '50px';
        compassDiv.appendChild(compassIcon);

        // 绑定点击事件，点击后重置地图方向
        compassDiv.addEventListener('click', () => {
          map.setHeading(0);  // 重置地图方向
          map.setTilt(0);     // 重置地图俯视角度
        });

        // 将控件添加到地图右上角
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(compassDiv);
      }

      function makeRoutes(addr) {
        var timerId
        var timedOut = false
        var initAddr = addr.initAddr
        var destAddr = addr.destAddr
        var request = {
          origin: initAddr,
          destination: destAddr,
          travelMode: addr.travelMode,
          language: 'ja'
        }
        var icons = {
          start: {
            url: 'img/start.png',
            anchor: new google.maps.Point(20, 20)
          },
          end: {
            url: 'img/end.png',
            anchor: new google.maps.Point(20, 20)
          }
        }
        var directionsService = new google.maps.DirectionsService()
        directionsService.route(request, function (response, status) {
          if (timedOut) {
            return
          } else {
            clearTimeout(timerId)
          }
          if (status == google.maps.DirectionsStatus.OK) {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
              center: initAddr,
              disableDefaultUI: true,
              zoom: 20
            })
            var directionsDisplay = new google.maps.DirectionsRenderer({
              map: map,
              suppressMarkers: true,
              polylineOptions: {
                strokeColor: '#96D200',
                strokeWeight: 8
              }
            })
            directionsDisplay.setDirections(response)
            var leg = response.routes[0].legs[0]
            makeMarker(leg.start_location, icons.start, map)
            makeMarker(destAddr, icons.end, map)
            var lineSymbol = {
              path: 'M 0,-1 0,1',
              strokeOpacity: 1,
              strokeWeight: 5,
              scale: 5
            }
            const flightPathCoordinates = [leg.end_location, destAddr]
            flightPath = new google.maps.Polyline({
              path: flightPathCoordinates,
              strokeOpacity: 0,
              icons: [{ icon: lineSymbol, offset: '50%', repeat: '15px' }],
              strokeColor: '#96D200'
            })
            flightPath.setMap(map)
            addCompassControl();
            postMiniMessage(response)
          } else {
            postMiniMessage('false')
          }
        })
        timerId = setTimeout(function () {
          timedOut = true
          postMiniMessage('false')
        }, 15000)
      }
      function setOldRoutes(route) {
        let response = JSON.parse(route)
        var icons = {
          start: {
            url: 'img/start.png',
            anchor: new google.maps.Point(20, 20)
          },
          end: {
            url: 'img/end.png',
            anchor: new google.maps.Point(20, 20)
          }
        }
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map,
          suppressMarkers: true,
          polylineOptions: {
            strokeColor: '#96D200',
            strokeWeight: 8
          }
        })
        directionsDisplay.setDirections(response)
        var leg = response.routes[0].legs[0]
        makeMarker(leg.start_location, icons.start, map)
        makeMarker(response.request.destination.location, icons.end, map)
        var lineSymbol = {
          path: 'M 0,-1 0,1',
          strokeOpacity: 1,
          strokeWeight: 5,
          scale: 3
        }
        const flightPathCoordinates = [leg.end_location, response.request.destination.location]
        flightPath = new google.maps.Polyline({
          path: flightPathCoordinates,
          strokeOpacity: 0,
          icons: [{ icon: lineSymbol, offset: '50%', repeat: '15px' }],
          strokeColor: '#96D200'
        })
        flightPath.setMap(map)
        postMiniMessage(response)
      }
      function updatePostion(position) {
        var newLatLng = new google.maps.LatLng(position.lat, position.lng)
        if (marker) {
          marker.setPosition(newLatLng)
        } else {
          marker = new google.maps.Marker({
            position: newLatLng,
            map: map,
            zIndex: 9999,
            icon: {
              path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
              fillColor: "red",
              fillOpacity: 1,
              strokeWeight: 0,
              rotation: rotation,
              scale: 8,
              anchor: new google.maps.Point(0, 5),
            }
          })
        }
      }
      function updateCompass(rotationValue, position) {
        rotation = rotationValue
        var newLatLng = new google.maps.LatLng(position.lat, position.lng)
        console.log(237, rotation)
        
        const svgMarker = {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          fillColor: "red",
          fillOpacity: 1,
          strokeWeight: 0,
          rotation: rotationValue,
          scale: 8,
          anchor: new google.maps.Point(0, 5),
        };
        if (marker) {
          marker.setIcon(svgMarker);
        } else {
          marker = new google.maps.Marker({
            position: newLatLng,
            map: map,
            zIndex: 9999,
            icon: svgMarker
          })
        }
      }
      function makeMarker(position, icon, map) {
        new google.maps.Marker({
          position: position,
          map: map,
          icon: icon
        })
      }
      function postMiniMessage(data) {
        uni.postMessage({
          data: {
            status: data
          }
        })
      }
      window.initMap = initMap
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
